<template>
    <div class="container">
        <div class="top">
            <a-button class="top-btn" @click="onAddCategory">添加分类</a-button>
            <a-button class="top-btn" type="primary" @click="saveSetting">保存</a-button>
        </div>
        <div class="bottom">
            <a-card
                v-for="(v, k) in list"
                :key="k"
                :title="`${v.name} - ${v.key}`" class="card">
                <div slot="extra" href="#">
                    <a-button type="normal" @click="onAddCategoryValue(v)"> <a-icon type="plus"/> 添加</a-button>
                    <a-button @click="onEditCategory(v)"> <a-icon type="edit"/> 编辑</a-button>
                    <a-button type="danger" @click="onDeleteCategory(k)"> <a-icon type="delete"/> 删除</a-button>
                </div>
                <div class="inner">
                    <a-dropdown
                    v-for="(vv, kk) in v.children"
                    :key="kk"
                    class="dropdown">
                        <a-menu slot="overlay">
                            <a-menu-item key="1" @click="onEditCategoryValue(v, vv)"> <a-icon type="edit" />编辑 </a-menu-item>
                            <a-menu-item key="2" @click="onDeleteCategoryValue(k, kk)"> <a-icon type="delete" />删除 </a-menu-item>
                        </a-menu>
                        <a-button style="margin-left: 8px"> {{ vv.name }} - {{ vv.key }} <a-icon type="down" /> </a-button>
                    </a-dropdown>
                </div>
            </a-card>
        </div>
        <a-modal
            :title="{
                add1: '添加分类',
                add2: `${edit.currKey}: 添加分类值`,
                edit1: `编辑分类: ${edit.currKey}`,
                edit2: `编辑分类值: ${edit.currKey}`
            }[edit.event]"
            :visible="edit.show"
            :confirm-loading="edit.loading"
            @ok="commitInput"
            @cancel="edit.show = false"
            :closable="false"
            cancelText="取消"
            okText="确定"
        >
            <div>KEY</div>
            <a-input v-model="edit.key"></a-input>
            <div style="margin-top: 20px;">VALUE</div>
            <a-input v-model="edit.name"></a-input>
        </a-modal>
    </div>
</template>

<script>
import {getSetting, setSetting} from "../../../api/setting";

export default {
    name: "SysCategory",
    data() {return {
        list: [],
        edit: {
            show: false,
            event: '',   // 'add1', 'add2', 'edit1', 'edit2'
            currKey: '', // 编辑和新增时当前的 key
            loading: false,
            key: '',
            name: ''
        }
    }},
    mounted() {
        this.initSetting()
    },
    methods: {
        resetEdit() {
            this.edit = {
                show: false,
                event: '',   // 'add1', 'add2', 'edit1', 'edit2'
                currKey: '', // 编辑和新增时当前的 key
                loading: false,
                key: '',
                name: ''
            }
        },
        commitInput() {
            switch (this.edit.event) {
                case 'add1': {
                    if (!this.edit.key) {
                        this.$message.error('请输入 KEY')
                        return
                    }
                    if (!this.edit.name) {
                        this.$message.error('请输入 VALUE')
                        return
                    }
                    if (this.list.find(v => v.key === this.edit.key)) {
                        this.$message.error('这个 KEY 已经存在，请更换其他 KEY')
                        return
                    }
                    this.list.push({
                        key: this.edit.key,
                        name: this.edit.name,
                        children: []
                    })
                    this.resetEdit()
                }; break;
                case 'add2': {
                    if (!this.edit.key) {
                        this.$message.error('请输入 KEY')
                        return
                    }
                    if (!this.edit.name) {
                        this.$message.error('请输入 VALUE')
                        return
                    }
                    if (this.list.find(v => v.key === this.edit.currKey).children.find(v => v.key === this.edit.key)) {
                        this.$message.error('这个 KEY 已经存在，请更换其他 KEY')
                        return
                    }
                    this.list.find(v => v.key === this.edit.currKey).children.push({
                        key: this.edit.key,
                        name: this.edit.name
                    })
                    this.resetEdit()
                }; break;
                case 'edit1': {
                    if (!this.edit.key) {
                        this.$message.error('请输入 KEY')
                        return
                    }
                    if (!this.edit.name) {
                        this.$message.error('请输入 VALUE')
                        return
                    }
                    if (this.list.filter(v => v.key !== this.edit.currKey).find(v => v.key === this.edit.key)) {
                        this.$message.error('KEY 重复，请更换')
                        return
                    }
                    const find = this.list.find(v => v.key === this.edit.currKey)
                    find.key = this.edit.key
                    find.name = this.edit.name
                    this.resetEdit()
                }; break;
                case 'edit2': {
                    if (!this.edit.key) {
                        this.$message.error('请输入 KEY')
                        return
                    }
                    if (!this.edit.name) {
                        this.$message.error('请输入 VALUE')
                        return
                    }
                    if (this.list.find(v => v.key === this.edit.currKey[0]).children.filter(v => v.key !== this.edit.currKey[1]).find(v => v.key === this.edit.key)) {
                        this.$message.error('KEY 重复，请更换')
                        return
                    }
                    const find = this.list.find(v => v.key === this.edit.currKey[0]).children.find(v => v.key === this.edit.currKey[1])
                    find.key = this.edit.key
                    find.name = this.edit.name
                    this.resetEdit()
                }; break;
            }
        },
        onEditCategoryValue(v, vv) {
            this.edit = {
                show: true,
                event: 'edit2',   // 'add1', 'add2', 'edit1', 'edit2'
                currKey: [v.key, vv.key], // 编辑和新增时当前的 key
                loading: false,
                key: vv.key,
                name: vv.name
            }
        },
        onDeleteCategoryValue(k, kk) {
            this.$confirm({
                content: '是否删除这条分类值？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.list[k].children.splice(kk, 1)
                }
            })
        },
        onEditCategory(v) {
            this.edit = {
                show: true,
                event: 'edit1',   // 'add1', 'add2', 'edit1', 'edit2'
                currKey: v.key, // 编辑和新增时当前的 key
                loading: false,
                key: v.key,
                name: v.name
            }
        },
        onDeleteCategory(k) {
            this.$confirm({
                content: '是否删除这条分类？',
                okText: '确定',
                cancelText: '取消',
                onOk: () => {
                    this.list.splice(k, 1)
                }
            })
        },
        onAddCategory() {
            this.edit = {
                show: true,
                event: 'add1',   // 'add1', 'add2', 'edit1', 'edit2'
                currKey: '', // 编辑和新增时当前的 key
                loading: false,
                key: '',
                name: ''
            }
        },
        onAddCategoryValue(v) {
            this.edit = {
                show: true,
                event: 'add2',   // 'add1', 'add2', 'edit1', 'edit2'
                currKey: v.key, // 编辑和新增时当前的 key
                loading: false,
                key: '',
                name: ''
            }
        },
        saveSetting() {
            setSetting({setting: [{
                type: 'category',
                value: JSON.stringify(this.list)
            }]}).then(res => {
                this.$message.success('保存成功')
            }).catch(e => {
                this.$message.error(e.msg || '')
            })
        },
        initSetting() {
            getSetting({
                types: 'category'
            }).then(res => {
                const setting = res.data.find(v => v.type === 'category')
                this.list = setting ? JSON.parse(setting.value) : []
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg || '暂未配置')
            })
        }
    }
}
</script>

<style scoped lang="scss">
.container {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    .top {
        width: 100%;
        height: 60px;
        display: flex;
        flex-direction: row;
        margin: 50px 0 0 50px;

        .top-btn {
            margin-right: 10px;
        }
    }
    .bottom {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-left: 50px;

        .card {
            width: calc(100% - 100px);
            min-height: 300px;
            margin-bottom: 30px;

            .inner {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

                .dropdown {
                    margin: 0 5px 10px 0;
                }
            }
        }
    }
}
</style>
